<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>backmanager</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="../css/back/manager.css">
</head>
<style>

    .right {
        width: 80%;
    }

    #search {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #search > label, #search > button, #option > button {
        margin: 0 1vh;

    }

    #search > input, #sex_select {
        height: 3vh;
        padding: 0 5px;
        font-size: 18px;
    }

    #menu_name, #search, #option, #page {
        width: 100%;
        height: 6vh;
        display: flex;
        font-size: 24px;
    }

    #star_age, #end_age {
        width: 5vh;
    }

    #find {
        font-size: 24px;
    }

    #option {
        display: flex;
        align-items: center;
    }

    button {
        width: 8vh;
        height: 4vh;
    }

    #table {
        width: 100%;
        height: 64vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 1px 1px 4px gray;
        border: 1px solid gray;
        border-radius: 5px;
        align-items: center;
    }

    table {
        width: 100%;
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #333333;
        text-align: center;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }

    table th {
        border-width: 1px 0;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
    }

    table td {
        border-width: 1px 0;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }

    #page input {
        width: 3vh;
        height: 3vh;
        text-align: center;
    }

    #page {
        justify-content: space-between;
    }
</style>
<body>
<div class="top">
    <div>
        <img id="logo" src="../img/logo_03_2rrh.png">
    </div>
    <div id="company">
        <div id="ch_name">
            万息科技有限公司
        </div>
        <div id="en_name">
            Wanxi TechnologyCo.,Ltd
        </div>
    </div>
    <div id="navigation">
        <a href="#" id="exit">退出</a>
    </div>
</div>
<div class="content">
    <div class="left">
        <div class="menu_title">操作导航</div>
        <div id="menu_title1" class="menu_title" onclick="openMenu(this)">
            用户管理
            <div class="indicator" id="indicator1">^</div>
        </div>
        <div class="menu" id="menu1">
            <div class="item">
                <a href="javascript:$('.right').load('/back/adduser.html')">用户添加</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a href="javascript:$('.right').load('/back/register.html')" onclick="$('.right').load('/back/queryuser.html')">用户查询</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title2" class="menu_title" onclick="openMenu(this)">
            公司管理
            <div class="indicator" id="indicator2">^</div>
        </div>
        <div class="menu" id="menu2">
            <div class="item">
                <a href="/addcompany">公司添加</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a href="/querycompany">公司查询</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title3" class="menu_title" onclick="openMenu(this)">
            产品管理
            <div class="indicator" id="indicator3">^</div>
        </div>
        <div class="menu" id="menu3">
            <div class="item">
                <a href="/addproduct">产品添加</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a href="/queryproduct">产品查询</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title4" class="menu_title" onclick="openMenu(this)">
            导航管理
            <div class="indicator" id="indicator4">^</div>
        </div>
        <div class="menu" id="menu4">
            <div class="item">
                <a href="/addnavigation">导航添加</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a href="/querynavigation">产品查询</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title5" class="menu_title" onclick="openMenu(this)">
            新闻管理
            <div class="indicator" id="indicator5">^</div>
        </div>
        <div class="menu" id="menu5">
            <div class="item">
                <a href="/addnews">新闻发布</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a href="/querynews">新闻查询</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title6" class="menu_title" onclick="openMenu(this)">
            菜单管理
            <div class="indicator" id="indicator6">^</div>
        </div>
        <div class="menu" id="menu6">
            <div class="item">
                <a href="/addmenu">菜单添加</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a href="/querymenu">菜单查询</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title7" class="menu_title" onclick="openMenu(this)">
            留言管理
            <div class="indicator" id="indicator7">^</div>
        </div>
        <div class="menu" id="menu7">
            <div class="item">
                <a href="/updatefacebook">留言修改</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a href="/queryfacebook">留言查询</a>
            </div>
        </div>
    </div>
    <div class="right">
        <div id="menu_name">用户管理</div>
        <div id="search">
            <label>姓名:</label><input type="text" id="username">
            <label>密码:</label><input type="text" id="password">
            <label>性别:</label>
            <select id="sex_select">
                <option value="全部">全部</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <label>年龄:</label><input type="text" id="star_age">
            <span>-</span>
            <input type="text" id="end_age">
            <button id="find">搜索</button>
        </div>
        <div id="option">
            <button>全选</button>
            <button>全不选</button>
            <button>反选</button>
            <button>批量删除</button>
        </div>
        <div id="table">
            <table>
                <tr>
                    <th><input type="checkbox">全选</th>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>username</td>
                    <td>password</td>
                    <td>20</td>
                    <td>男</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>username</td>
                    <td>password</td>
                    <td>20</td>
                    <td>男</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>username</td>
                    <td>password</td>
                    <td>20</td>
                    <td>男</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            </table>
        </div>
        <div id="page">
            <div>
                每页显示 <input id="size" type="text" value="5">条
            </div>
            <div>
                <button>首页</button>
                <button>上一页</button>
                第<input id="page_ipt" type="text" value="1">页
                <button>下一页</button>
                <button>尾页</button>
            </div>
            <div>总页数<span>5</span>页</div>
        </div>
    </div>
</div>
<script>
    const itemHeight = 40;
    const dividerHeight = 1;

    function openMenu(obj) {
        menuTitleId = obj.id;
        menuId = "menu" + menuTitleId.substring(10);
        indicatorId = "indicator" + menuTitleId.substring(10);

        menu = document.getElementById(menuId);
        indicator = document.getElementById(indicatorId);
        height = menu.style.height;

        if (height == "0px" || height == "") {
            childAmount = menu.getElementsByTagName('div').length;
            dividerAmount = menu.getElementsByTagName('li').length;
            height = childAmount * itemHeight + dividerAmount * dividerHeight;
            menu.style.height = height + "px";
            indicator.style.transform = "rotate(180deg)";
        } else {
            menu.style.height = "0px";
            indicator.style.transform = "rotate(0deg)";
        }
    }
</script>
</body>
</html>